<template>
<div class="newest">
  <div class="tab-bar">
    <span class="item" @click="tag=0" :class="{active:tag==0}">全部</span>
    <span class="item" @click="tag=7" :class="{active:tag==7}">华语</span>
    <span class="item" @click="tag=96" :class="{active:tag==96}">欧美</span>
    <span class="item" @click="tag=8" :class="{active:tag==8}">日本</span>
    <span class="item" @click="tag=16" :class="{active:tag==16}">韩国</span>
  </div>
  <table class="el-table">
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th></th>
        <th>音乐标题</th>
        <th>歌手</th>
        <th>专辑</th>
        <th>时长</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in lists" :key="index" @click="aaaa(item.id)">
        <td></td>
        <td>{{index+1}}</td>
        <td>
          <div class="img-warp" >
            <span><img src="../assets/images/play.png" alt="" class="play" ></span>
<!--            <img :src="item.album.picUrl" alt="" class="img-warp-img" @click="aaaa(item.id)">-->
          </div>
        </td>
        <td>
          <div class="song-wrap">
            <div class="name-wrap">
              <span>{{item.name}}</span>
              <span></span>
            </div>
          </div>
        </td>
        <td>{{item.album.artists["0"].name}}</td>
        <td>{{item.album.name}}</td>
        <td>{{item.duration}}</td>
      </tr>
    </tbody>
  </table>
</div>
</template>

<script>
import axios from "axios";
export default {
  name: "newest",
  data(){
    return{
      lists:[],
      tag: '0'
    }
  },
  watch:{
    tag() {
      this.getList()
    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList(){
      axios({
        url:'https://autumnfish.cn/top/song',
        method: 'get',
        params:{
          type:this.tag,
        }
      }).then(res => {
        // console.log(res)
        // this.lists = res.data.data.slice(0, 20)
        this.lists = res.data.data
        for(let i =0;i<this.lists.length;i++){
          let duration = this.lists[i].duration
          let min = parseInt(duration / 1000 /60)
          min = min < 10? '0' + min : min
          let sec = parseInt((duration /1000) %60)
          sec = sec < 10? '0' + sec : sec
          this.lists[i].duration = `${min}:${sec}`
        }

      })
    },
    aaaa(id){
      // console.log(id)
      axios({
        url:'https://autumnfish.cn/song/url',
        method:'get',
        params:{
          id
        }
      }).then(res=>{
        console.log(res)
        let url = res.data.data[0].url
        // console.log(this.$parent.musicUrl)
        this.$parent.musicUrl = url
      })
    }
  }
}
</script>

<style scoped>
/*选项卡*/
  .newest{
    width: 1100px;
    margin: 20px auto;
  }
  .newest .tab-bar{
    margin-top: 20px;
    margin-bottom: 10px;
    width: 400px;
    height: 20px;
    display: flex;
    float: right;
  }
  .newest .tab-bar span{
    display: block;
    padding: 0 20px;
    cursor: pointer;
  }

  /*内容*/
table{
  padding-bottom: 50px;
  /*background-color: #ffa22d;*/
}
tbody tr{
  cursor: pointer;
}

.el-table  tr{
  width: 100%;
}
th{
  height: 40px;
  line-height: 40px;
  color: #000000;
}
td{
  height: 60px;
  line-height: 60px;
  /*background-color: #ffa22d;*/
}

/*td:nth-child(7),*/
/*th:nth-child(7){*/
/*  float: right;*/
/*  width: 45px;*/

/*}*/

.img-warp{
  width: 60px;
  height: 60px;
  /*margin-top: 20px;*/
  position: relative;
  margin: auto;
}

.img-warp .img-warp-img{
  width: 60px;
  height: 60px;
  cursor: pointer;
  border-radius: 5px;
}

.play{
  cursor: pointer;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.active{
  color: #ffa22d;
}



</style>